<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        th{
            border: 1px solid black;
            background-color: antiquewhite;
            padding: 5px;
        }
        td{
            border: 1px solid black;
            font-family: 'Courier New', Courier, monospace;
            padding: 4px;
        }
        table{
            border-collapse: collapse;
            width: 90%;
            margin: auto;
        }
        div{
            border: 1px solid black;
            width: 60%;
            margin: auto;
        }

    </style>

</head>
<body style="text-align:center">
    <script>
        function add(obj){
            
            var vstu_id=formNode.stu_id.value;
            var vstu_name=formNode.stu_name.value;
            var vstu_sex=formNode.stu_sex.value;
            if(vstu_id==""||vstu_name==""||vstu_sex==""){
                alert("数据不能为空！");
            }else{

            
                alert(vstu_id+' '+vstu_name+' '+vstu_sex)

                var vtable1=document.getElementById('table1'); 

                var vtr=document.createElement('tr');
                

                var vtd_id=document.createElement('td');
                vtd_id.innerText=vstu_id;

                var vtd_name=document.createElement('td');
                vtd_name.innerText=vstu_name;

                var vtd_sex=document.createElement('td');
                vtd_sex.innerHTML=vstu_sex;

                var vth_del=document.createElement('td');
                
                var va=document.createElement('a');
                va.setAttribute("href","JavaScript:void(0)");
                va.setAttribute("onclick","del(this)");
                va.innerHTML="删除";
                vth_del.appendChild(va);

                vtr.appendChild(vtd_id);
                vtr.appendChild(vtd_name);
                vtr.appendChild(vtd_sex);
                vtr.appendChild(vth_del);

                vtable1.appendChild(vtr);
            }

        }

        function del(obj){
            var msg="确定删除这条数据吗?";

            if(confirm(msg)==true){
                var vth_delNode=obj.parentNode;
                var vtrNode=vth_delNode.parentNode;
                var vtable1=vtrNode.parentNode;
                vtable1.removeChild(vtrNode);
            }
        }
    </script>
    
    <div>

        <a href ="file:///android_asset/student2.html">跳转</a>
        <form name="formNode" style="margin-top: 15px">
            编号：<input type="text" maxlength="3" size="4" name="stu_id">
            姓名：<input type="text" maxlength="8" size="4" name="stu_name">
            性别：<input type="text" size="4" name="stu_sex">
            <input type="button" value="添加" onclick="add(this)">
        </form>
        <table style="margin-top: 20px; margin-bottom: 20px;" id="table1">
            <caption style="font-size: 20px;">学生成绩表</caption>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
    
            <tr>
                <td>001</td>
                <td>lixu</td>
                <td>nan</td>
                <td><a onclick="del(this)" href="JavaScript:void(0)">删除</a></td>
            </tr>
        </table>
        
    </div>
    
    
   
</body>
</html>